Frontend-koddelning: Ruttbaserad och komponentbaserad

// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
 return (
 
 Laddar...

I detta exempel laddas komponenterna Home och About latent med hjälp av React.lazy() och dynamiska importer. Suspense-komponenten tillhandahåller ett fallback-gränssnitt medan komponenterna laddas. React Router hanterar navigeringen och ser till att rätt komponent renderas baserat på den aktuella rutten.

Exempel (Angular)

I Angular uppnås ruttbaserad koddelning med hjälp av latladdade moduler (lazy-loaded modules).

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
 { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
 { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Här specificerar egenskapen loadChildren i ruttkonfigurationen sökvägen till modulen som ska laddas latent. Angulars router kommer automatiskt att ladda modulen och dess associerade komponenter endast när användaren navigerar till motsvarande rutt.

Exempel (Vue.js)

Vue.js stöder också ruttbaserad koddelning med hjälp av dynamiska importer i routerkonfigurationen.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
 { path: '/', component: () => import('./components/Home.vue') },
 { path: '/about', component: () => import('./components/About.vue') }
];

const router = new VueRouter({
 routes
});

export default router;

Alternativet component i ruttkonfigurationen använder en dynamisk import för att ladda komponenten asynkront. Vue Router hanterar laddning och rendering av komponenten när rutten besöks.

Fördelar med ruttbaserad koddelning

• Enkelt att implementera: Ruttbaserad koddelning är relativt okomplicerat att implementera, särskilt med stödet från moderna ramverk.
• Tydlig uppdelning av ansvarsområden: Varje rutt representerar en distinkt sektion av applikationen, vilket gör det enkelt att resonera kring koden och dess beroenden.
• Effektivt för stora applikationer: Ruttbaserad koddelning är särskilt fördelaktigt för stora applikationer med många rutter och funktioner.

Nackdelar med ruttbaserad koddelning

• Kanske inte tillräckligt granulär: Ruttbaserad koddelning kanske inte är tillräckligt för applikationer med komplexa komponenter som delas mellan flera rutter.
• Initial laddningstid kan fortfarande vara hög: Om en rutt innehåller många beroenden kan den initiala laddningstiden för den rutten fortfarande vara betydande.

Komponentbaserad koddelning

Komponentbaserad koddelning tar koddelning ett steg längre genom att dela upp applikationskoden i mindre chunks baserat på enskilda komponenter. Denna metod ger mer granulär kontroll över kodladdning och kan vara särskilt effektiv för applikationer med komplexa användargränssnitt och återanvändbara komponenter.

Implementering

Komponentbaserad koddelning förlitar sig också på dynamiska importer, men istället för att ladda hela rutter laddas enskilda komponenter vid behov. Detta kan uppnås med tekniker som:

1. Lat laddning av komponenter: Använd dynamiska importer för att ladda komponenter endast när de behövs, till exempel när de renderas för första gången eller när en specifik händelse inträffar.
2. Villkorlig rendering: Rendera komponenter villkorligt baserat på användarinteraktion eller andra faktorer, och ladda komponentkoden endast när villkoret är uppfyllt.
3. Intersection Observer API: Använd Intersection Observer API för att upptäcka när en komponent är synlig i visningsfönstret och ladda dess kod därefter. Detta är särskilt användbart för att ladda komponenter som initialt är utanför skärmen.

Exempel (React)

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
 return (
 

 Laddar...
}>